<script setup>
import {ref, onMounted} from 'vue'
import { get } from '../js/http';
import {useRouter} from 'vue-router'
import {useDark, useToggle} from '@vueuse/core'

const router = useRouter();
const isDark = useDark();
const toggleDark = useToggle(isDark)
const props = defineProps({projectId:String})
const currentProject = ref({});

const handleSelect = (e) => {
    switch(e){
        case 'stationConfig':
            router.push('/stationConfig/'+String(currentProject.value.id));
            break;
        case 'routingSetting':
            router.push('/routingSetting/'+String(currentProject.value.id));
            break;
        case 'finallyFile':
            router.push('/workspace/'+currentProject.value.id);
            break;
        default:
            break;
    }
}

onMounted(()=>{
    get('/routing/project/byId',{id: props.projectId}).then(res=>{
        if(res.status){
            currentProject.value = res.data;
            document.title = res.data.projectName + '-' + res.data.tagName
        }else{
            ElMessage({type:'error', message: '无法打开他人的私有项目'});
            router.push('/')
        }
    })
})

</script>

<template>
    <div class="project-workspace">
        <header>
            <div class="userarea">
                {{ currentProject.projectName }} - {{ currentProject.tagName }}
            </div>
            <el-menu class="menu" mode="horizontal" default-active="finallyFile" @select="handleSelect">
                <el-menu-item index="stationConfig">车站配置</el-menu-item>
                <el-menu-item index="routingSetting">交路配置</el-menu-item>
                <el-menu-item index="finallyFile">项目成果物</el-menu-item>
            </el-menu>
        </header>
        <main>
            <router-view/>
        </main>
    </div>
</template>

<style scoped>
header{
    max-height: 55px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--el-menu-border-color);
}
.userarea{
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 20px;
    height: 55px;
    border-bottom: 1px solid var(--el-menu-border-color);
    padding-left: 20px;
    font-size: 16px;
    font-weight: bold;
}
.menu{
    height: 55px;
    width: calc(100% - 400px);
    border: none;
}
</style>